<template>
  <div class="home">
    <el-row type="flex" justify="space-around">
      <el-card style="width:100%">
        <div slot="header" style="text-align: left;height: 2em;line-height: 2em">
          <!-- <b style="font-size: 20px;">分组</b> | -->
          <b style="color: grey;">{{articles[0].topicName}}</b>
        </div>
        <el-row class="art-item" v-for="(article, index) in articles" v-bind:key="index">
         <article-item :article="article"> </article-item>
        </el-row>
      </el-card>
      <el-pagination
        :hide-on-single-page="showFlag"
        :total="total"
        layout="prev, pager, next"
        page-size="10"
        @current-change="loadTopics"
        v-if="total > 10"
      ></el-pagination>
    </el-row>
  </div>
</template>

<script>
import { addTopic, qryTopics, delTopic, updTopic } from "@/api/topicApis";
import { qryArticles, searchArticles, archive } from "@/api/apis";
import ArticleItem from '../components/article-item.vue';

export default {
  name: "home",
  data() {
    return {
      articles: [],
      total: 10,
      showFlag: true
    };
  },
  components: {
    ArticleItem
  },
  mounted() {
    this.loadTopics(1);
  },
  methods: {
    loadTopics(page) {
      let topicId = this.$route.params.topicId;
      qryArticles({
        topicId: topicId
      }).then(res => {
        this.articles = res.data;
      });
    }
  }
};
</script>

<style scoped>
.topic-item {
  width: 20em;
  margin: 25px 25px;
  padding-bottom: 5px;
  /* border-bottom: solid 1px rgb(223, 219, 219); */
}

.item {
  float: left;
}
#side .item {
  margin-bottom: 30px;
}
</style>